<template>
    <div class="h100 box-sizing">
        <e-table
            ref="eTableRef" class="w100 menu-table"
            pageName="systemUserPage" childrenName="child" maxHeight="calc(100vh - 330px )"
            :requestApi="systemMenuListApi" :columns="columns">
            <template #header-left="{ ids, list, isSelected }">
                <div class="page-header d-flex ai-center">
                    <e-popover ref="addPopover" @show="show" @handleSure="handleActionUser('add', 'addPopover')">
                        <template #button>
                            <div class="text-center cur-pointer">
                                <ft-icon name="el-icon Plus" size="24" color="#E0641C"></ft-icon>
                                <div>添加</div>
                            </div>
                        </template>
                        <template #content>
                            <modify ref="modifyRef" :dataList="dataList"/>
                        </template>
                    </e-popover>
                    <e-popover ref="editPopover" :disabled="list.length != 1" @show="editShow(list)" @handleSure="handleActionUser('edit', 'editPopover')">
                        <template #button>
                            <div class="ml-50 text-center cur-pointer" @click="list.length > 1 || list.length == 0 ? proxy.$modal.msgError('只能选择一条数据编辑') : ''">
                                <ft-icon name="el-icon EditPen" size="24" color="#E0641C"></ft-icon>
                                <div>修改</div>
                            </div>
                        </template>
                        <template #content>
                            <modify ref="modifyRef" :dataList="dataList"/>
                        </template>
                    </e-popover>
                    <div class="ml-50 text-center cur-pointer" @click="handleDelList(ids)">
                        <ft-icon name="el-icon CloseBold" size="24" color="#E0641C"></ft-icon>
                        <div>删除</div>
                    </div>
                </div>
            </template>
            <template #icon="{ row }">
                <ft-icon :name="`iconfont ${row.icon}`" size="24" ></ft-icon>
            </template>
            <template #action="{ row, index }">
                <div class="w100 d-flex ai-center action-cell">
                    <e-popover :ref="`rowEditPopover${index}`" @show="show(row)" @handleSure="handleActionUser('add', `rowEditPopover${index}`)">
                        <template #button>
                            <e-button link>添加下级分类</e-button>
                        </template>
                        <template #content>
                            <modify ref="modifyRef" :dataList="dataList"/>
                        </template>
                    </e-popover>
                    <ft-icon :name="`el-icon ${expands.includes(row.id)? 'ArrowDown' : 'ArrowRight'}`" size="16" class="cur-pointer" @click="openSub(row)"></ft-icon>
                </div>
            </template>
        </e-table>
    </div>
</template>
<script setup>
import { systemMenuListApi, systemAddMenuApi, systemEditMenuApi, systemDelMenuApi } from "@/api/modules/system";
import { useHandleData } from "@/hooks/useHandleData";
import modify from "./components/modify.vue";

const eTableRef = ref(null);
const modifyRef = ref(null);
const { proxy } = getCurrentInstance();
const dataList = ref([]);
// 点击新增打开弹窗时的事件
const show = (row) => {
    dataList.value = eTableRef.value.getData();
    modifyRef.value.reset('add', { pid: row? row.id : null });
    modifyRef.value.resetForm();
}
// 点击修改打开弹窗时的事件
const editShow = (list) => {
    dataList.value = eTableRef.value.getData();
    if (list.length > 1) {
        return proxy.$modal.msgError('只能选择一条数据编辑');
    }
    modifyRef.value.reset('edit', list[0]);
}
// 新增 与 修改
const handleActionUser = async(type, popRef) => {
    try {
        const validate =await modifyRef.value.validate();
        if (validate) {
            const api = type === 'edit'? systemEditMenuApi : systemAddMenuApi;
            const res = await api(modifyRef.value.getFormData());
            proxy.$modal.msgSuccess(res.message);
            proxy.$refs[popRef].close();
        } else {
            proxy.$refs[popRef].closeLoading();
        }
    } finally {
        eTableRef.value.refresh();
    }
}
const columns = [
    {
        type: "selection"
    }, {
        type: "index",
        label: "编号",
        width: 80
    }, {
        label: "标题",
        prop: "title"
    }, {
        label: "图标",
        prop: "icon"
    }, {
        label: "菜单名称",
        prop: "name"
    }, {
        label: "链接",
        prop: "path"
    }, {
        label: "",
        prop: "action"
    }
]
const expands = ref([]);
// 打开数据下级
const openSub = (row) => {
    eTableRef.value.handleExpandChange(row);
    if (expands.value.includes(row.id)) {
        expands.value = expands.value.filter(item => item !== row.id);
    } else {
        expands.value.push(row.id);
    }
}
// 删除
const handleDelList = async(ids) => {
    if (ids.length === 0) {
        return proxy.$modal.msgError('请选择要删除的数据');
    }
    try {
        await useHandleData(systemDelMenuApi, ids, "删除后无法恢复，请慎重考虑");
    } finally {
        eTableRef.value.refresh();
    }
}
</script>

<style lang="scss" scoped>
.menu-table {
    :deep(.el-table__expand-icon),
    :deep(.el-table__placeholder) {
        display: none;
    }
    :deep(.el-table__row.el-table__row--level-1) {
        .action-cell {
            display: none;
        }
    }
}
</style> 